<template>
	<div class="product_list" curpage="ProductLeft131232132138120">
		<div class="top_msg">
			<div class="fixed_box"></div>
			<el-image fit="cover" :src="!!letMsgData?.imgUrl ? letMsgData?.imgUrl : GoodImage" />
			<div class="top_title">{{letMsgData.spu}}</div>
			<div class="top_desc">
				<div class="top_val">{{letMsgData.brand}}</div>
				<div class="top_val">{{letMsgData.supplierName}}</div>
			</div>
			<div class="top_border"></div>
		</div> 
		<div class="product_menu">
			<el-scrollbar height="100%">
				<el-collapse accordion v-model="activeName">
					<el-collapse-item v-for="(item,index) in letMsgData.list" :name="item.key" >
						<template #title>
							<div class="product_title">{{item.name}}</div>
						</template>
						<div class="product_item" :class="clickValue == items.key?'active':''" v-for="(items,index) in item.children" @click="showPage(item.key,items.key)">{{items.name}}</div>
					</el-collapse-item>
				</el-collapse>
			</el-scrollbar>
			
		</div>
	</div>
</template>
<script lang="ts" setup name="ProductLeft">
	import {
		getCurrentInstance,
		inject,
		ref,
		reactive,
		computed,
		onMounted,
		watch
	} from "vue";
	import GoodImage from "@/assets/images/goods_img.webp";
	import { useRoute } from "vue-router";
	import {
		getLeftMsg
	} from "@/api/modules/goodsArchive/list/detail";
	const route = useRoute();
	
	const letMsgData = ref({})//左侧数据
	const activeName = ref({})//一级选择的key
	const clickValue = ref({})//二级选择的key
	const emit = defineEmits < {
		addKey: '';
	} > ();
	const showPage = (key,val) => {
		const url = new URL(location.href);
		activeName.value = key;
		clickValue.value = val;
		emit('addKey',clickValue.value)
		url.searchParams.set("key",clickValue.value);
		history.pushState({}, "", url);
	};
	const getPakingMsg = () => {
		let dataMsg = {
			product_id:route.query.p_id
		}
		getLeftMsg(dataMsg).then(({ code, data }) => {
			if (code == ResultEnum.SUCCESS) {
				letMsgData.value = data;
				clickValue.value = route.query.key;
				emit('addKey',clickValue.value)
				data.list.map(item=>{
					let itemNum = item.children.findIndex(t=>t.key == route.query.key)
					if(itemNum !== -1){
						activeName.value = item.key;
					}
					
				})
			}
		});
	};
	
	onMounted(() => {
		getPakingMsg()
	});
</script>
<style lang="scss" scoped>
	@import url("./index.scss");
</style>